<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=PqnELsHUNs1tF5POhWvncyVlWhwGx75K"></script>
	</head>
	<body>
		<header class="dpflex">
			<span class="flex1" id="running">Running</span>
			<span class="flex1" id="riding">Riding</span>
			<span class="flex1" id="courses">Course Training</span>
		</header>
		<main>
			<div id="S1">
				<p id="c1">The total distance of running</p>
				<p><span class="num caiyun" id="meter">0</span>Km</p>
				<!-- 地图 -->
				<div class="rel map">
					<div class="abs m2">GO</div>
					<div class="dpflex abs m3">
						<span class="iconfont icon-shezhi fc-gray"></span>

						<span class="iconfont icon-music fc-gray"></span>
					</div>

					<div id="container"></div>
				</div>
				<div class="dpflex word">
					<div>
						<p id="c2">Riding routes</p>
						<p>Use it,and find someone do the same thing like you</p>
					</div>

					<span class="iconfont icon-right"></span>
				</div>
			</div>
		</main>
		<!-- 尾部 -->
		<footer class="dpflex"></footer>
		<!-- 蒙版 -->
		<div class="mask"></div>
	</body>
</html>
